<template>
    <div class="setInformation">
        <div class="header">
            <van-nav-bar title="消息设置" left-arrow @click-left="handleLeft" />
        </div>
        <div class="setInformation_form">
            <div class="form_item">
                <div class="label">系统公告</div>
                <van-switch v-model="checked" size="16px" />
            </div>
            <div class="form_item">
                <div class="label">还品提醒</div>
                <van-switch v-model="checked" size="16px" />
            </div>
            <div class="form_item">
                <div class="label">过期提醒</div>
                <van-switch v-model="checked" size="16px" />
            </div>
            <div class="form_item">
                <div class="label">消息提醒</div>
                <van-switch v-model="checked" size="16px" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, defineEmits } from 'vue'

const emit = defineEmits(['close'])

const checked = ref(true)

const handleLeft = () => {
    emit('close')
}
</script>

<style lang="less" scoped>
.setInformation {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    z-index: 1;

    .header {
        background: linear-gradient(#CDECFF 0%, #FFFFFF 70%);
        filter: blur(0px);
        height: 90px;
        padding-top: 44px;
        box-sizing: border-box;

        :deep(.van-icon-arrow-left) {
            color: #1a1b1c !important;
        }

        :deep(.van-nav-bar) {
            background: none !important;
        }

        :deep(.van-nav-bar__content) {
            background-color: transparent !important;
        }
    }

    .setInformation_form {
        padding: 0 15px;
        box-sizing: border-box;

        .form_item {
            width: 100%;
            padding: 20px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #FAFAFF;

            .label {
                font-weight: 400;
                font-size: 16px;
                color: #1B1D1E;
            }
        }
    }
}
</style>